<template slot-scope="scope">
  <div>
    <el-checkbox :indeterminate="isIndeterminateJpck" v-model="checkAllJpck" @change="handleJpckCheckAllChange">用品仓库</el-checkbox>
    <div style="margin:0px 0px 0px 20px;width:20px;">
      <el-checkbox-group v-model="checkedJpckList" @change="handleCheckedCitiesChangeJpck">
        <el-checkbox v-for="jpck in sitesJpck" :label="jpck.storageCode" :key="jpck.storageCode" :value="jpck.storageCode">
          {{jpck.storageName}}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
  import { getJpckAccessories } from '@/api/common/auth/roleManage'
  export default {
    name: "storageJpck",
    data() {
      return {
        checkAllJpck: false,
        loading: false,
        isIndeterminateJpck: false,
        checkedJpckList: [],
        sitesJpck: []
      }
    },
    props: {},
    created() {
      this.loadData()
    },
    methods: {
      async loadData() {
        // this.loading = true;
        // const getJpckAccessoriesRes = await getJpckAccessories()
        // this.loading = false
        // if(getJpckAccessoriesRes.resultCode === 200&&getJpckAccessoriesRes.data&&getJpckAccessoriesRes.data.length>0) {
        //   this.sitesJpck = _.cloneDeep(getJpckAccessoriesRes.data);
        // }
      },

      handleJpckCheckAllChange(val) {
        const checkedJpckList = [];
        if (val) {
          for (var i = 0; i < this.sitesJpck.length; i++) {
            checkedJpckList.push(this.sitesJpck[i].storageCode);
          }
        }
        this.checkedJpckList = checkedJpckList;
        // this.checkedJpckList = val ? sitesJpck : [];
        this.isIndeterminateJpck = false;
      },
      handleCheckedCitiesChangeJpck(value) {
        let checkedCount = value.length;
        this.checkAllJpck = checkedCount === this.sitesJpck.length;
        this.isIndeterminateJpck = checkedCount > 0 && checkedCount < this.sitesJpck.length;
      },

      getData() {
        return [...this.checkedJpckList]
      }
    }
  }

</script>

<style scoped>
  .el-checkbox+.el-checkbox {
    margin-left: 0px;
  }
  .el-checkbox {
    margin-right: 25px;
  }
</style>
